<style>
  /*.el-input--suffix .el-input__inner{*/
    /*height: 40px;*/
  /*}*/
</style>
<template>
  <div class="workDay">
    <div class="title">添加假期</div>
    <div class="content">
      <div class="con">
        <span class="con_title">日期</span>
        <el-date-picker
          v-model="chooseDay"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="con">
        <span class="con_title">描述</span>
        <el-input v-model="describe" placeholder="请输入描述内容" clearable></el-input>
      </div>
      <div class="con">
        <div class="buttons">
          <el-button type="primary" @click="agree">确认</el-button>
          <el-button @click="close">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    props: ['chooseType'],
    name: "workDay",
    data() {
      return {
        type: 0, //0：假期，1：特殊工作日
        chooseDay: '',
        describe: ''
      }
    },
    created() {
    },
    mounted() {
      let self = this
      self.type = self.chooseType
    },
    methods: {
      ...mapActions(['upstate']),
      //确认
      agree(){
        let self = this
        if (self.chooseDay != ''){
          if (self.describe != ''){
            let time=Date.parse(new Date(self.chooseDay)) /1000
            let params={
              "dayType":parseInt(self.type),
              "description": self.describe,
              "id": 0,
              "time": time
            }
            self.$http.post(self.conURL + 'pm/api/work_day',params).then(res => {
              if (self.type == 0){
                self.$notify({
                  title: '成功',
                  message: '添加假期成功',
                  type: 'success'
                });
              } else if (self.type == 1){
                self.$notify({
                  title: '成功',
                  message: '添加特殊工作日成功',
                  type: 'success'
                });
              }
              self.$emit('getBack',true)
            })
          } else {
            this.$notify({
              title: '警告',
              message: '描述不能为空',
              type: 'warning'
            });
          }
        } else {
          this.$notify({
            title: '警告',
            message: '日期不能为空',
            type: 'warning'
          });
        }
      },
      //取消
      close(){
        let self = this
        self.upstate({key:'showWorkDay',val:false})
      }
    }
  }
</script>

<style lang="less">
  .workDay{
    display: flex;
    flex-direction: column;
    width: 400px;
    max-height: 345px;
    margin: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 10;
    border-radius: 5px;
    .title{
      font-size: 24px;
      color: #333;
      text-align: center;
      height: 68px;
      line-height: 68px;
      width: 100%;
      border-bottom: 1px solid #e5e5e5;
    }
    .content{
      display: flex;
      flex-direction: column;
      padding: 24px;
      box-sizing: border-box;
      .con{
        display: flex;
        flex-direction: column;
        margin-bottom: 24px;
        .con_title{
          font-size: 20px;
          color: #666666;
          line-height: 20px;
          margin-bottom: 10px;
        }
        .buttons{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 50%;
          margin: auto;
        }
      }
      .con:last-child{
        margin-bottom: 0;
      }
    }
  }
</style>
